<template>
  <el-container class="userInfo" style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px">
      <el-menu :default-openeds="['1', '3']">
        <el-menu-item index="1" >
          <template slot="title"
            ><i class="el-icon-menu"></i
            >
            <router-link to="/userPage/userInfoPage"
              >
              首页
              </router-link
            >
            </template
          >
        </el-menu-item>
        <el-menu-item index="2" >
          <template slot="title"
            ><i class="el-icon-menu"></i>
            <router-link to="/userPage/accountingCenter">
            帐务中心
            </router-link>
          </template>
        </el-menu-item>
        <el-menu-item @click="judgeUserType" index="3">
          <template slot="title"
            ><i class="el-icon-setting"></i>作家专区</template
          >
        </el-menu-item>
        <el-menu-item index="4">
          <template slot="title"
            ><i class="el-icon-setting"></i>我的本章说</template
          >
        </el-menu-item>
        <el-menu-item index="5">
          <template slot="title"
            ><i class="el-icon-setting"></i>历史记录</template
          >
        </el-menu-item>
      </el-menu>
    </el-aside>
    <router-view />

    <!-- <novel-user-info-page></novel-user-info-page> -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>您现在还未注册成为作家，是否需要注册登记成为作家</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toWriter">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { becomeAnAuthor } from "@/api";
import NovelUserInfoPage from "./NovelUserInfoPage.vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  components: { NovelUserInfoPage },
  data() {
    return {
      dialogVisible: false,
    };
  },
  computed: {
    // 获取vux的数据
    ...mapState("routeJump", ["toSettingUserInfo"]),
  },
  watch: {
    toSettingUserInfo() {
      this.$router.push({
        name: "userSetting",
      });
    },
  },
  methods: {
    judgeUserType() {
      let user = JSON.parse(window.sessionStorage.getItem("userInfo"));
      if (user.type === "WRITER") {
        //前往页面
        this.$store.commit("routeJump/toWriterAction");
      } else {
        //是否注册成为作家
        console.log("询问");
        this.dialogVisible = true;
      }
    },
    toWriter() {
      this.dialogVisible = false;
      becomeAnAuthor()
        .then(({ data }) => {
          if (data.code == 0) {
            let user = JSON.parse(window.sessionStorage.getItem("userInfo"));
            user.type = "WRITER";
            window.sessionStorage.setItem("userInfo", JSON.stringify(user));
            this.$store.commit('routeJump/updateRefreshHead');
            this.$notify({
              title: "提示",
              message: "您已成功注册成为作家",
              position: "bottom-right",
            });
            // window.sessionStorage.setItem(
            //   "userInfo",
            //   JSON.stringify(data.data)
            // );
            //前往作家页面
            this.$store.commit("routeJump/toWriterAction");
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.userInfo {
  margin: auto;
  width: 1000px;
}
</style>